<!DOCTYPE html>
{% extends 'configmanager/__base__.html' %}
{% block search_display %}none{% endblock %}

{% block content %}

    {#    HTML部分#}

    <!-- 每30s刷新一次页面 -->
    <meta http-equiv="refresh" content="60">


    <ul id="myTab" class="nav nav-tabs">
        <li>
            <a href="#ALARM" data-toggle="tab">报警-统计报表</a>
        </li>
        <li>
            <a href="#RDS" data-toggle="tab">RDS-统计报表</a>
        </li>
        <li>
            <a href="#ECS" data-toggle="tab">ECS-统计报表</a>
        </li>
    </ul>

    <div id="myTabContent" class="tab-content">

        {#        RDS统计报表#}
        <div class="tab-pane fade in active" id="RDS">
            <div class="panel panel-default">
                <div class="panel-body">

                    {#RDS资源使用率饼图#}
                    <div class="row">
                        <div class="col-lg-4">
                            <div id="rds_cpu_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-4">
                            <div id="rds_io_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-4">
                            <div id="rds_disk_pie" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br>

                    {# RDS-CPU折线图#}
                    <div class="row">
                        <div class="col-md-2">
                            <form action="{% url 'configmanager:index' %}" method="post" id="rds_line_form"
                                  role="form">
                                {% csrf_token %}
                                <div class="form-group">
                                    <select onchange="submitForm_RDS_range();" class="form-control"
                                            style="width: 100%;" name="select_range">
                                        <option selected="selected">{{ rds_range_default }}</option>
                                        <option style="{% if rds_range_default == '1小时' %}display: none{% endif %}">
                                            1小时
                                        </option>
                                        <option style="{% if rds_range_default == '6小时' %}display: none{% endif %}">
                                            6小时
                                        </option>
                                        <option style="{% if rds_range_default == '12小时' %}display: none{% endif %}">
                                            12小时
                                        </option>
                                        <option style="{% if rds_range_default == '1天' %}display: none{% endif %}">
                                            1天
                                        </option>
                                        <option style="{% if rds_range_default == '3天' %}display: none{% endif %}">
                                            3天
                                        </option>
                                        <option style="{% if rds_range_default == '7天' %}display: none{% endif %}">
                                            7天
                                        </option>
                                        <option style="{% if rds_range_default == '14天' %}display: none{% endif %}">
                                            14天
                                        </option>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-12">
                            <div id="rds_cpu_line" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br><br>

                    {#RDS-I/O折线图#}
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="rds_io_line" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br><br>

                    {#RDS-disk折线图#}
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="rds_disk_line" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br><br>

                </div>
            </div>
        </div>

        {#        报警统计报表#}
        <div class="tab-pane fade active" id="ALARM">
            <div class="panel panel-default">
                <div class="panel-body">
                    {#报警统计饼图#}
                    <div class="row">
                        <div class="col-lg-5">
                            <div id="alarm_product_type_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-7">
                            <div id="alarm_metric_type_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-12">
                            <div id="alarm_instance_pie" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br>

                    {# 报警数量折线图#}
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="alarm_line" style="min-height:300px;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        {#        ECS统计报表#}
        <div class="tab-pane fade active" id="ECS">
            <div class="panel panel-default">
                <div class="panel-body">

                    {#ECS资源使用率饼图#}
                    <div class="row">
                        <div class="col-lg-4">
                            <div id="ecs_cpu_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-4">
                            <div id="ecs_memory_pie" style="min-height:300px;"></div>
                        </div>
                        <div class="col-lg-4">
                            <div id="ecs_disk_pie" style="min-height:300px;"></div>
                        </div>
                    </div>
                    <br><br>
                </div>
            </div>
        </div>
    </div>




    {#     JS部分#}

    {#    标签页js#}
    <script>
        $(function () {
            $('#myTab li:eq(0) a').tab('show');
        });
    </script>


    <script type="text/javascript">
        {#django安全认证机制#}
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });


        {#产品类型ALARM饼图#}
        var myChart_ALARM_PRODUCT_TYPE_pie = echarts.init(document.getElementById('alarm_product_type_pie'));
        jQuery('#alarm_product_type_pie').showLoading();
        {#显示产品类型ALARM饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_alarm_product_type_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var product_type_list = result['product_type_list']
                var product_type_alarm_list = result['product_type_alarm_list']
                var option = {
                    title: {
                        text: '产品类型报警比例',
                        subtext: '近30天',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}报警数:\n{c}'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: product_type_list
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: product_type_alarm_list,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_ALARM_PRODUCT_TYPE_pie.setOption(option);
                jQuery('#alarm_product_type_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#alarm_product_type_pie').hideLoading();
            }
        });


        {#     监控项类型ALARM饼图#}
        var myChart_ALARM_METRIC_TYPE_pie = echarts.init(document.getElementById('alarm_metric_type_pie'));
        jQuery('#alarm_metric_type_pie').showLoading();
        {#    显示监控项类型ALARM饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_alarm_metric_type_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var metric_type_list = result['metric_type_list']
                var metric_type_alarm_list = result['metric_type_alarm_list']
                var option = {
                    title: {
                        text: '监控项报警比例',
                        subtext: '近30天',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}报警数:\n{c}'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: metric_type_list
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: metric_type_alarm_list,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_ALARM_METRIC_TYPE_pie.setOption(option);
                jQuery('#alarm_metric_type_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#alarm_metric_type_pie').hideLoading();
            }
        });


        {#     实例比例ALARM饼图#}
        var myChart_ALARM_INSTANCE_pie = echarts.init(document.getElementById('alarm_instance_pie'));
        jQuery('#alarm_instance_pie').showLoading();
        {#    显示实例比例ALARM饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_alarm_instance_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var instance_alarm_list = result['instance_alarm_list']
                var instance_list = result['instance_list']
                var option = {
                    title: {
                        text: '实例报警比例',
                        subtext: '近30天',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}报警数:\n{c}'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: instance_list
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: instance_alarm_list,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_ALARM_INSTANCE_pie.setOption(option);
                jQuery('#alarm_instance_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#alarm_instance_pie').hideLoading();
            }
        });


        {#     ALARM-line图#}
        var myChart_ALARM_line = echarts.init(document.getElementById('alarm_line'));
        {#显示loading加载样式#}
        jQuery('#alarm_line').showLoading();
        {#    显示RDS-CPU-line图。#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_alarm_line' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var alarm_num_x = result['alarm_num_x'];
                var alarm_num_y = result['alarm_num_y'];
                var option = {
                    title: {
                        text: '报警数量趋势（单位：次）',
                        subtext: '今年内'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: '{b}月份报警数量:\n{c}次'
                    },
                    legend: {
                        data: ['报警数量趋势（单位：次）']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {},
                            magicType: {
                                type: ['line', 'bar']
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: alarm_num_x,
                            axisLabel: {
                                interval: 'auto',
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}'
                            },
                            show: true
                        }
                    ],
                    series: [{
                        data: alarm_num_y,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#0099cc',  //圈圈的颜色
                                lineStyle: {
                                    color: '#0099cc'  //线的颜色
                                }
                            }
                        },
                        areaStyle: {}
                    }]
                };
                myChart_ALARM_line.setOption(option);
                jQuery('#alarm_line').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#alarm_line').hideLoading();
            }
        });


        {#RDS_CPU饼图#}
        var myChart_RDS_CPU_pie = echarts.init(document.getElementById('rds_cpu_pie'));
        jQuery('#rds_cpu_pie').showLoading();
        {#    显示RDS-CPU饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_cpu_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var last_rds_cpu = result['last_rds_cpu'];
                var option = {
                    title: {
                        text: 'CPU使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: last_rds_cpu, name: '已使用'},
                                {value: 100 - last_rds_cpu, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_RDS_CPU_pie.setOption(option);
                jQuery('#rds_cpu_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_cpu_pie').hideLoading();
            }
        });


        {#RDS_IO饼图#}
        var myChart_RDS_IO_pie = echarts.init(document.getElementById('rds_io_pie'));
        jQuery('#rds_io_pie').showLoading();
        {#显示RDS-I/O饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_io_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var last_rds_io = result['last_rds_io']
                var option = {
                    title: {
                        text: 'I/O使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: last_rds_io, name: '已使用'},
                                {value: 100 - last_rds_io, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_RDS_IO_pie.setOption(option);
                jQuery('#rds_io_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_io_pie').hideLoading();
            }
        });


        {#RDS_disk饼图#}
        var myChart_RDS_disk_pie = echarts.init(document.getElementById('rds_disk_pie'));
        jQuery('#rds_disk_pie').showLoading();
        {#显示RDS-磁盘使用率饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_disk_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var last_rds_disk = result['last_rds_disk']
                var option = {
                    title: {
                        text: '磁盘使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: last_rds_disk, name: '已使用'},
                                {value: 100 - last_rds_disk, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart_RDS_disk_pie.setOption(option);
                jQuery('#rds_disk_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_disk_pie').hideLoading();
            }
        });


        {#     RDS_CPU-line图#}
        var myChart_RDS_CPU_line = echarts.init(document.getElementById('rds_cpu_line'));
        var select_range = "{{ rds_range_default }}";
        jQuery('#rds_cpu_line').showLoading();
        {#    显示RDS-CPU-line图。#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_line' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            data: {'select_range': select_range},
            success: function (result) {
                var add_time = result['add_time']
                var recently_rds_cpu = result['recently_rds_cpu']
                var option = {
                    title: {
                        text: 'CPU使用率(单位:%)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: '{b}\nCPU使用率:{c}%'
                    },
                    legend: {
                        data: ['CPU使用率(单位:%)']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: add_time,
                            axisLabel: {
                                interval: 'auto',

                                // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                                formatter: function (value, index) {
                                    // 格式化成时:分
                                    var date = new Date(value);
                                    var texts = [date.getHours(), date.getMinutes()];
                                    return texts.join(':');
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}% '
                            },
                            show: true
                        }
                    ],
                    series: [{
                        data: recently_rds_cpu,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#0099cc',  //圈圈的颜色
                                lineStyle: {
                                    color: '#0099cc'  //线的颜色
                                }
                            }
                        },
                        areaStyle: {}
                    }]
                };
                myChart_RDS_CPU_line.setOption(option);
                jQuery('#rds_cpu_line').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_cpu_line').hideLoading();
            }
        });


        {#     RDS_IO-line图#}
        var myChart_RDS_IO_line = echarts.init(document.getElementById('rds_io_line'));
        jQuery('#rds_io_line').showLoading();
        {#    显示RDS-IO-line图。#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_line' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            data: {'select_range': select_range},
            success: function (result) {
                var add_time = result['add_time']
                var recently_rds_io = result['recently_rds_io']
                var option = {
                    title: {
                        text: 'I/O使用率(单位:%)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: '{b}\nI/O使用率:{c}%'
                    },
                    legend: {
                        data: ['I/O使用率(单位:%)']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: add_time,
                            axisLabel: {
                                interval: 'auto',

                                // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                                formatter: function (value, index) {
                                    // 格式化成时:分
                                    var date = new Date(value);
                                    var texts = [date.getHours(), date.getMinutes()];
                                    return texts.join(':');
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}% '
                            },
                            show: true
                        }
                    ],
                    series: [{
                        data: recently_rds_io,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#0099cc',  //圈圈的颜色
                                lineStyle: {
                                    color: '#0099cc'  //线的颜色
                                }
                            }
                        },
                        areaStyle: {}
                    }]
                };
                myChart_RDS_IO_line.setOption(option);
                jQuery('#rds_io_line').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_io_line').hideLoading();
            }
        });


        {#     RDS_DISK-line图#}
        var myChart_RDS_DISK_line = echarts.init(document.getElementById('rds_disk_line'));
        jQuery('#rds_disk_line').showLoading();
        {#    显示RDS-RDS_DISK-line图。#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_rds_line' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            data: {'select_range': select_range},
            success: function (result) {
                var add_time = result['add_time']
                var recently_rds_disk = result['recently_rds_disk']
                var option = {
                    title: {
                        text: '磁盘使用率(单位:%)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: '{b}\n磁盘使用率:{c}%'
                    },
                    legend: {
                        data: ['磁盘使用率(单位:%)']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: add_time,
                            axisLabel: {
                                interval: 'auto',

                                // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
                                formatter: function (value, index) {
                                    // 格式化成时:分
                                    var date = new Date(value);
                                    var texts = [date.getHours(), date.getMinutes()];
                                    return texts.join(':');
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}% '
                            },
                            show: true
                        }
                    ],
                    series: [{
                        data: recently_rds_disk,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#0099cc',  //圈圈的颜色
                                lineStyle: {
                                    color: '#0099cc'  //线的颜色
                                }
                            }
                        },
                        areaStyle: {}
                    }]
                };
                myChart_RDS_DISK_line.setOption(option);
                jQuery('#rds_disk_line').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#rds_disk_line').hideLoading();
            }
        });


        {#ECS-CPU使用率饼图#}
        var myChart_ECS_CPU_pie = echarts.init(document.getElementById('ecs_cpu_pie'));
        jQuery('#ecs_cpu_pie').showLoading();
        {#显示ECS-CPU饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_ecs_cpu_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var ecs_cpu_average = result['ecs_cpu_average']
                var option = {
                    title: {
                        text: '平均CPU使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: ecs_cpu_average, name: '已使用'},
                                {value: 100 - ecs_cpu_average, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                myChart_ECS_CPU_pie.setOption(option);
                jQuery('#ecs_cpu_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#ecs_cpu_pie').hideLoading();
            }
        });


        {#ECS-内存使用率饼图#}
        var myChart_ECS_MEMORY_pie = echarts.init(document.getElementById('ecs_memory_pie'));
        jQuery('#ecs_memory_pie').showLoading();
        {#显示ECS-内存使用率饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_ecs_memory_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var ecs_memory_average = result['ecs_memory_average']
                var option = {
                    title: {
                        text: '平均内存使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: ecs_memory_average, name: '已使用'},
                                {value: 100 - ecs_memory_average, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                myChart_ECS_MEMORY_pie.setOption(option);
                jQuery('#ecs_memory_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#ecs_memory_pie').hideLoading();
            }
        });


        {#ECS-磁盘使用率饼图#}
        var myChart_ECS_DISK_pie = echarts.init(document.getElementById('ecs_disk_pie'));
        jQuery('#ecs_disk_pie').showLoading();
        {#显示ECS-磁盘使用率饼图#}
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "{% url 'configmanager:index_ecs_disk_pie' %}",    //请求发送到TestServlet处
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                var ecs_disk_average = result['ecs_disk_average']
                var option = {
                    title: {
                        text: '平均磁盘使用率',
                        subtext: '最近5分钟',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}:\n{c}%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['已使用', '未使用']
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: ecs_disk_average, name: '已使用'},
                                {value: 100 - ecs_disk_average, name: '未使用'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
                myChart_ECS_DISK_pie.setOption(option);
                jQuery('#ecs_disk_pie').hideLoading();
            },
            error: function (errorMsg) {
                //请求失败时执行该函
                jQuery('#ecs_memory_pie').hideLoading();
            }
        });


        //表单提交
        function submitForm_RDS_range() {
            var form_net = document.getElementById("rds_line_form");
            form_net.submit();
        }


    </script>

{% endblock %}